<template>
  <el-container class="wrap">
    <el-header>
        <el-card class="box-card">
            <el-input placeholder="请输入备忘事项" v-model="newinput" clearable v-on:keyup.enter.native="updatafun()"></el-input>
        </el-card>
    </el-header>
    <el-main>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>未办事项</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
        </div>
        <!-- <div v-for="o in 4" :key="o" class="text item">{{'列表内容 ' + o }}</div> -->
        <el-row v-for="item in todolist" :key='item.wid'>
            <el-col :span="5">&nbsp;</el-col>
            <el-col :span="1" @click.native="updatafun(2,item)">
            <i class="el-icon-success" style="font-size: 30px;"></i>
            </el-col>
            <el-col :span="12">
            <el-input v-model="item.detail" v-on:keyup.enter.native="updatafun(1,item)"></el-input>
            </el-col>
            <el-col :span="1" @click.native="removefun(item)">
              <i class="el-icon-remove" style="font-size: 30px;"></i>
            </el-col>
            <el-col :span="5">&nbsp;</el-col>
        </el-row>
      </el-card>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>已办事项</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
        </div>
        <!-- <div v-for="o in 4" :key="o" class="text item">{{'列表内容 ' + o }}</div> -->
        <el-row v-for="item in doedlist" :key='item.wid' class="doed">
            <el-col :span="5">&nbsp;</el-col>
            <el-col :span="1" @click.native="updatafun(2,item)">
            <i class="el-icon-success" style="font-size: 30px;"></i>
            </el-col>
            <el-col :span="12">
            <el-input v-model="item.detail" v-on:keyup.enter.native="updatafun(1,item)"></el-input>
            </el-col>
            <el-col :span="1" @click.native="removefun(item)">
              <i class="el-icon-remove" style="font-size: 30px;"></i>
            </el-col>
            <el-col :span="5">&nbsp;</el-col>
        </el-row>
      </el-card>
      
    </el-main>
    <el-footer class="footer">伟隆科技有限公司</el-footer>
  </el-container>
</template>

<script>
import requests from '@/https.js'
export default {
  data() {
    return {
      newinput: "",
      todolist:[],
      doedlist:[],
    };
  },
    mounted () {
        // 初始化
        this.start()
       
    },
  methods: {
    start(){
        this.todolist=[],
        this.doedlist=[],
         requests.get('/api/value').then(res=>{
          // console.log(res.data)
            for(let i of res.data.data){
              if(i.state == false){
                this.todolist.push(i)
              }else{
                this.doedlist.push(i)
              }
            }
        })
    },
    substart(){

    },
    removefun(item){
        requests.post('/api/value',{'key':'remove',data:{'id':item.wid}}).then(res=>{
              // this.start()
              if(item.state){
                  this.doedlist.splice(this.doedlist.indexOf(item.wid),1)
              }else{
                  this.todolist.splice(this.todolist.indexOf(item.wid),1)
              }
        })
    },
     updatafun(iffun,item){
      let params={}
      if(iffun==1){
        params ={'key':'update',data:{'id':item.wid,'value':item.detail}}
        requests.post('/api/value',params).then(res=>{
              if(res.data.code == 0){
                  this.$notify({
                    title: '成功',  
                    message: '修改成功',
                    type: 'success',
                    duration:'2000'
                });
              }else{
                this.$notify({
                    title: '失败',  
                    message: res.data.msg,
                    type: 'error',
                    duration:'2000'
                });

              }
            
          })
      }else if(iffun ==2){
        console.log(!item.state)
        params ={'key':'state',data:{'id':item.wid,'state':!item.state}}
        requests.post('/api/value',params).then(res=>{
              if(item.state){
                this.doedlist.splice(this.doedlist.indexOf(item),1)
                this.todolist.push(res.data.data[0])
              }else{
                this.todolist.splice(this.todolist.indexOf(item),1)
                this.doedlist.push(res.data.data[0])
              }
          })
      }else{
        params ={'key':'add',data:{'value':this.newinput}}
        requests.post('/api/value',params).then(res=>{
              console.log(res.data)
              this.todolist.push(res.data.data[0])
          })
      }
      
    },
    clearfun(id) {
      //   事项请求
      requests.post('url').then(res=>{
            console.log(res)
        })

    },

  }
};
</script>

<style scoped>
.wrap {
  width: 60%;
  margin: 0 auto;
}
.box-card{
    margin-top: 20px;
}
.doed{
}
.doed input{
}
</style>